<template>
  <div class="demo-page">
    <div class="top">
      <div class="header">
        <h3>代码开发自定义页面示例</h3>
      </div>
      <div class="conten">
        <div>
          <span>容器化，私有部署</span>
          <span>集成扩展页面、逻辑</span>
        </div>
      </div>
    </div>
    <div class="center">
      <div v-for="(item, index) in imgList" :key="'img-item-'+index" class="img-item">
        <p></p>
        <span>{{item.key}}</span>
        <b @click="setCurrent(item.key)">{{item.name}}</b>
      </div>
    </div>
    <div class="bottom">
      <div class="text">
        <h4 v-if="currentItem && ['示例', '示例源码'].indexOf(currentItem) == -1"><i></i><span>{{currentItem}}</span></h4>
        <ul v-if="currentItem == imgList[1].key">
          <li>接口地址</li>
          <p>/mgr/jvs-design/base/external/page/{jvsAppId}/permissions</p>
          <li>GET请求入参</li>
          <p>jvsAppId&nbsp;&nbsp;应用id，路径参数，来自前端路由参数</p>
          <p>url&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页面地址，params参数，拼接规则： /{项目名(-ui结尾)}/#{页面路由}</p>
          <p>接口示例代码参见api.js</p>
          <li>返回结果为权限标识集合</li>
        </ul>
        <ul v-if="currentItem == imgList[2].key">
          <li>权限判断全局函数</li>
          <p>$permissionMatch('标识字符', 标识集合)</p>
          <li>结果说明</li>
          <p>有权限返回true，否则false</p>
          <li>dom使用  </li>
          <p>$permissionMatch</p>
          <li>配置js使用  </li>
          <p>Vue.prototype.$permissionMatch</p>
          <li>vue使用</li>
          <p>this.$permissionMatch</p>
        </ul>
        <ul v-if="currentItem == imgList[3].key">
          <li>前端打包项目文件</li>
          <p>例如：npm run build后，生成项目文件(jvs-dock-ui)和静态资源文件(jvs-ui-pulic)</p>
          <li>文件发布配置</li>
          <p>项目文件放到nginx与jvs-ui同级目录下，配置前端路由转发</p>
          <p>静态资源文件放到与jvs-ui同级目录下，若使用jvs-ui-public无需重新上传、配置，其他自定义资源文件需要重新命名并配置转发</p>
        </ul>
        <ul v-if="currentItem == imgList[3].key">
          <li>应用下添加自定义页面</li>
          <p>目标地址：/{项目名(-ui结尾)}/#{页面路由}, 例如：/jvs-dock-ui/#/demo</p>
          <p></p>
        </ul>
        <div v-if="currentItem == imgList[0].key">
          <ul>
            <p>示例文字示例文字示例文字示例文字示例文字示例文字，无权限</p>
          </ul>
          <h1 v-if="$permissionMatch('pic1', permisionList)">dom使用</h1>
          <p v-if="vueUse">vue使用</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getResourceFlag } from './api'
export default {
  data () {
    return {
      permisionList: [], // 权限标识集合
      currentItem: '获取权限说明',
      imgList: [
        {
          key: '示例',
          name: '查看',
        },
        {
          key: '获取权限说明',
          name: '查看',
        },
        {
          key: '前端对接权限',
          name: '查看',
        },
        {
          key: '文件发布说明',
          name: '查看',
        },
        {
          key: '页面使用说明',
          name: '查看',
        },
        {
          key: '示例源码',
          name: '查看',
        },
      ],
      vueUse: false
    }
  },
  created() {
    if(this.$route.query && this.$route.query.jvsAppId) {
      getResourceFlag(this.$route.query.jvsAppId, `/jvs-dock-ui/#${this.$route.path}`).then(res => {
        if(res.data && res.data.code == 0) {
          this.permisionList = res.data.data
          this.vueUse = this.$permissionMatch('pic2', this.permisionList)
        }
      })
    }
  },
  methods: {
    setCurrent (str) {
      this.currentItem = str
      if(str == '示例') {
        this.$router.push({ path: `/demo/page?jvsAppId=${this.$route.query.jvsAppId}` })
      }
      if(str == '示例源码') {
        let link=document.createElement('a')
        link.style.display='none'
        link.target = '_blank'
        link.href = 'https://gitee.com/software-minister/demo-ui'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss">
body{
  margin: 0;
  padding: 0;
}
.demo-page{
  width: 100%;
  height: 100%;
  overflow: hidden;
  .top{
    position: relative;
    height: 415px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #F6F6F6;
    .header{
      width: 100%;
      height: 65px;
      margin-top: 188px;
      h3{
        margin: 0;
        padding: 0;
        line-height: 65px;
        color: #7B7B7B;
        text-align: center;
        font-size: 48px;
        text-indent: 27px;
      }
    }
    .conten{
      display: flex;
      justify-content: center;
      margin-top: 31px;
      padding-left: 23px;
      div{
        display: flex;
        span{
          display: flex;
          align-items: center;
          margin-right: 20px;
          color: #7B7B7B;
          text-indent: 5px;
          font-size: 16px;
        }
        span::before{
          display: block;
          content: "";
          width: 10px;
          height: 2px;
          background: #7B7B7B;
        }
      }
    }
  }
  .center{
    margin-top: -64px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .img-item{
      color: #7B7B7B;
      position: relative;
      font-size: 16px;
      margin-left: 10px;
      p{
        width: 180px;
        height: 128px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        img{
          display: block;
          width: 100%;
        }
      }
      span{
        position: absolute;
        z-index: 1;
        font-size: 14px;
        left: 15px;
        top: 25px;
        line-height: 26px;
      }
      b{
        position: absolute;
        z-index: 1;
        font-size: 14px;
        left: 15px;
        top: 70px;
        border: 2.5px solid #BBBBBB;
        line-height: 28px;
        padding: 0 16px;
        color: #7B7B7B;
        opacity: .9;
        font-weight: normal;
        cursor: pointer;
      }
    }
    .img-item:nth-of-type(1){
      margin-left: 0px;
    }
  }
  .bottom{
    height: calc(100vh - 480px);
    overflow: hidden;
    overflow-y: auto;
    .text{
      margin-top: 74px;
      margin-top: 44px;
      margin-left: 233px;
      h4{
        margin: 0;
        display: flex;
        align-items: center;
        color: #7B7B7B;
        font-size: 18px;
        letter-spacing: 1px;
        i{
          display: inline-block;
          width: 4px;
          height: 18px;
          background: #3471ff;
          border-radius: 2px;
          margin-right: 12px;
        }
      }
      ul{
        margin: 0;
        padding: 0;
        margin-top: 10px;
        padding-left: 15px;
        color: #7B7B7B;
        font-size: 17px;
        p{
          margin: 0;
          padding: 5px 0;
        }
      }
    }
  }
  .bottom::-webkit-scrollbar{
    display: none;
  }
}
</style>